<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Memo } from '@element-plus/icons-vue'
const props = defineProps({
  menu: {
    require: true,
    type: Array
  }
})
const route = useRoute()
const activeIndex = computed(() => {
  return route.path
})
</script>

<template>
  <div class="menu-wrapper">
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" router unique-opened>
      <template v-for="(item, index) in props.menu" :key="index">
        <el-sub-menu :index="item.router">
          <template #title>
            <el-icon><Memo /></el-icon>
            <span>{{ item.name }}</span>
          </template>
          <template v-for="(obj, subIndex) in item.children" :key="subIndex">
            <el-menu-item :index="obj.router"
              ><span class="circleIcon"></span>{{ obj.name }}</el-menu-item
            >
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.menu-wrapper {
  width: 240px;
  height: calc(100vh - 50px);
  overflow: auto;
  overflow-x: hidden;
  background-color: rgb(226, 234, 238);
  .el-menu-vertical-demo {
    width: 100%;
    height: 100%;
  }
  .circleIcon {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgb(11, 156, 240);
    margin-right: 10px;
  }
}
</style>
